<template>
  <div
    @click="debounceToggleClick"
  >
    <svg-icon
      iconClass="cursorPointer"
      :name="isActive ? 'sideBarOpen': 'sideBarClose'"
    ></svg-icon>
  </div>
</template>

<script lang="ts" setup>
import { defineProps, defineEmits } from 'vue'
import { debounce } from 'lodash'
const prop = defineProps({
  isActive: {
    type: Boolean,
    default: false
  }
})
const emit = defineEmits(['toggle-click'])
const toggleClick = () => {
  emit('toggle-click', !prop.isActive)
}
const debounceToggleClick = debounce(toggleClick, 0)

// export default defineComponent({
//     emits: ['toggle-click'],
//     props: {
//       isActive: {
//         type: Boolean,
//         default: false
//       }
//     },
//     setup(_, context) {
//       const toggleClick = () => {
//         context.emit('toggle-click', '发送事件')
//       }
//       return {
//         toggleClick
//       }
//     }
// })

</script>

<style lang="scss" scoped>
.icon {
  vertical-align: middle;
}

.is-active {
  transform: rotate(180deg);
}
</style>
